<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>班级级验收</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }

      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }

      .mui-bar ~ .mui-pull-top-tips {
        top: 24px;
      }

      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }

      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }

      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }

      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }

      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }

      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }

      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }

      .mui-pull-top-canvas canvas {
        width: 40px;
      }

      /* .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      } */

      /* .silder-wrap {
        height: 60px;
      }
      
      .mui-fullscreen .mui-segmented-control~.mui-slider-group {
        top: 60px;
      }
      
     .mui-segmented-control .mui-control-item {
        line-height: 60px;
      } */

      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #3188FE;
        position: relative;
      } */

      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #3188FE;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      } */

      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 0 20px;
      }
      .mui-card-header {
        /* padding: 0 0 20px 0; */
        position: relative;
        font-size: 16px;
      }
      .lists {
        padding: 20px 0 0 0;
      }

      .lists li {
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-right: 20px;
      }

      .lists li .left_name {
        color: #9098ab;
        white-space: nowrap;
      }

      .lists li .right_name {
        color: #9098ab;
        float: right;
      }

      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188fe;
      }

      /* .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      } */
      .indexs {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3188fe;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-right: 5px;
      }
      .txt_l {
        display: inline-block;
      }
      .tags {
        display: inline-block;
        width: 80px;
        height: 40px;
        background: url(../img/task/yinzhang_tinggongdaijiandian.png) no-repeat;
        background-size: 100%;
        vertical-align: middle;
      }
      .marks {
        display: inline-block;
        width: 70px;
        height: 26px;
        line-height: 26px;
        /* background-color: #10B7AF; */
        border-radius: 2px;
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
        margin-right: 20px;
      }
      .m_r {
        padding-right: 25px;
      }
      .mui-navigate-right:after {
        color: #b4c0cf;
        font-size: 20px;
        right: 0;
      }
      .sx_s {
        color: #fff;
      }
      .sx_s span {
        font-size: 17px;
      }
      .b_g0 {
        background-color: #10b7af;
      }
      .b_g1 {
        background-color: #3188fe;
      }
      .b_g2 {
        background-color: #b4c0cf;
      }
      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }
      .content_ul {
        padding: 30px;
        overflow: hidden;
      }
      .content_ul .rowli ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #dcdcdc;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
      }
      .rowli ul li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #f5f6f7;
        border: solid 1px #c2cfda;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        /* flex-grow: 1; */
      }
      .rowli ul li.ls {
        background-color: #3188fe;
        color: #fff;
      }
      .btnli {
        text-align: center;
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
      }
      .btnli .btns {
        background-color: #e7ecf1;
      }
      .btnli button {
        width: 45%;
      }
      .head_s {
        padding: 0 20px;
        border-bottom: solid 1px #dcdcdc !important;
        /* height: 20px; */
      }
      .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      }

      .silder-wrap {
        height: 60px;
      }

      .mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
        top: 60px;
      }

      .mui-segmented-control .mui-control-item {
        line-height: 60px;
      }

      .mui-segmented-control.mui-segmented-control-inverted
        .mui-control-item.mui-active {
        color: #3188fe;
        position: relative;
      }

      .mui-segmented-control.mui-segmented-control-inverted
        .mui-control-item.mui-active:after {
        content: "";
        display: block;
        width: 24px;
        height: 3px;
        background: #3188fe;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>

  <body>
    <div id="container">
      <!--<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">班级级验收</h1>
      </header>-->
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <!--<div
            id="sliderSegmentedControl"
            class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted silder-wrap"
            style="background-color: #fff"
          >
            <a class="mui-control-item" @tap="toItem(1)"
              ><span class="txt">技术交底</span></a
            >
            <a class="mui-control-item" @tap="toItem(2)"
              ><span class="txt">执行待办</span></a
            >
            <a class="mui-control-item mui-active" @tap="toItem(2)"
              ><span class="txt">班组级验收</span></a
            >
          </div>-->

          <div class="tab-content mui-slider-group" id="tab-content">
            <div
              id="item1"
              class="mui-slider-item mui-control-content mui-active"
            >
              <!--<div id="item1-scroll">-->
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div>
                    <div
                      class="mui-card card_content"
                      v-for="(item,index) in projectList"
                      :key="item.id"
                      v-cloak
                    >
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          <li class="lis" @tap="toViewList(item)">
                            <span class="mui-navigate-right">
                              <span class="marks" :class="status(item.ss,0)">
                                {{status(item.ss,1)}}
                              </span>
                              {{item.n}}
                            </span>
                            <!-- <a>生成通知单</a> -->
                          </li>
                          <li class="lis">
                            <span class="left_name"
                              >开始时间：{{formatDate(item.st)}}</span
                            >
                            <span class="right_name"
                              >结束时间：{{formatDate(item.et)}}</span
                            >
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var size = 15
      var page = 1
      var donePage = 1
      var ids = 3
      // mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决a标签不能跳转页面
      mui.plusReady(function () {
        getProject(page)
        // getTaskList(donePage)
      })

      var vm = new Vue({
        el: "#container",
        data: {
          projectList: [],
          taskList: [],
          aList: [],
          yList: [],
          wList: [],
        },
        created: function () {
          // getProject(page)
          //        getTaskList(donePage)
        },
        methods: {
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          status(item, v) {
            if (v == 1) {
              if (item == 0) {
                return "未开始"
              } else if (item == 1) {
                return "进行中"
              } else if (item == 2) {
                return "已完成"
              }
            } else {
              if (item == 0) {
                return "b_g0"
              } else if (item == 1) {
                return "b_g1"
              } else if (item == 2) {
                return "b_g2"
              }
            }
          },
          toViewList(item) {
            //          projectCategory  项目分类，0:常规项目 1:单任务项目
            mui.baseApp.openWindow("./workOverview.html", {
              projectTaskId: item.id,
            })
          },
          toTask(item) {
            mui.baseApp.openWindow("./project_task_list.html", {
              projectId: item.id,
            })
          },
          toItem(type) {
            if (type == 0) {
              mui.baseApp.openWindow("../index.html", {})
            }
            if (type == 1) {
              mui.baseApp.openWindow("../disclose/list.html", {})
            }
            if (type == 2) {
              mui.baseApp.openWindow("../performTasks/carryoutToDo.html", {})
            }
            if (type == 3) {
              mui.baseApp.openWindow("../performTasks/taskList.html", {})
            }
          },
        },
      })

      ;(function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $(".mui-scroll-wrapper").scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration,
        })
        $.ready(function () {
          $(".mui-scroll").pullToRefresh({
            down: {
              callback: function () {
                var self = this
                setTimeout(function () {
                  page = 1
                  getProject(page)
                  self.endPullDownToRefresh()
                }, 1000)
              },
            },
            up: {
              callback: function () {
                var self = this
                setTimeout(function () {
                  mui.toast("11111")
                  console.log(index)
                  page++
                  getProject(page)
                  self.endPullUpToRefresh()
                }, 1000)
              },
            },
          })

          mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
          // mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        })
      })(mui)

      function getProject(page) {
        if (page === 1) {
          plus.nativeUI.showWaiting("加载中...")
        }
        mui.baseApp.httpRequst(
          "get",
          "/app/api/task",
          {
            page: page,
            size: size,
            stage: 4,
          },
          function (data) {
            console.log("数据列表", data)
            plus.nativeUI.closeWaiting()
            if (page == 1) {
              vm.projectList = []
            }
            vm.projectList = vm.projectList.concat(data.records)
            vm.aList = [...vm.projectList]
            // data.data.forEach((res)=>{
            //   console.log('idds',res)
            //   if(res.status==2){
            //     console.log('idds12',res)
            //     vm.yList=res;
            //   }else if(res.status==0||res.status==1){
            //     vm.wList=res;
            //   }
            // })
            if (data.records.length < size) {
              //
              mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true) //参数为true代表没有更多数据了。
              return
            } else {
              mui("#item1 .mui-scroll")
                .pullToRefresh()
                .endPullUpToRefresh(false) //参数为true代表没有更多数据了。
              mui("#item1 .mui-scroll").pullToRefresh().refresh(true) //启用上拉加载
            }
          },
          function () {
            plus.nativeUI.closeWaiting()
            console.log("获取数据失败")
          }
        )
      }

      document.getElementById("slider").addEventListener("slide", function (e) {
        console.log(e.detail.slideNumber)
      })
      window.addEventListener("back", function (event) {
        let data = event.detail
        page = 1
        getProject(page)
      })
    </script>
  </body>
</html>
